<template>
  <div class="hello">
    <van-form >
      <div class="form-wrapper">
        <div v-for="(item, index) in keywordData" :key="index" :class="(item.isShow || (expand && !item.isShow))?'typesetting':''">
            <div  v-if="item.isShow || (expand && !item.isShow)">
            <!-- 文本输入框 -->
            <van-field
              v-if="item.type === 'text'"
              v-model="form[item.key]"
              :placeholder="item.placeholder"
              class="field-item"
            />
            <!-- 选择器 -->
            <van-field
              v-else-if="item.type === 'select'"
              readonly
              clickable
              :value="form[item.key]? form[item.key].text : ''"
              :placeholder="item.placeholder"
              @click="showSelector(item.key)"
              class="field-item"
            />
            
            <!-- 日期选择器触发输入框 -->
            <van-field
              v-else-if="item.type === 'date'"
              :value="form[item.key] instanceof Array ? form[item.key].join(', ') : form[item.key]"
              :placeholder="item.placeholder"
              @click="showDatePicker(item.key)"
              class="field-item"
            />
            <!-- 用户选择输入框 -->
            <van-field
              v-else-if="item.type === 'user'"
              v-model="form[item.key]"
              :placeholder="item.placeholder"
              @click="$refs.selectUser.show()"
              class="field-item"
            />
          </div>
        </div>
      </div>
      <div class="button-wrapper">
        <!-- 重置按钮 -->
        <van-button type="primary" round @click="resetForm">重置</van-button>
        <!-- 搜索按钮 -->
        <van-button type="info" round @click="search">搜索</van-button>
        <!-- 展开/关闭更多搜索条件按钮 -->
        <div class="expand" @click="expand = !expand">
          <span>{{ expand ? '关闭' : '展开' }}</span>
          更多搜索条件
          <van-icon :name="expand ? 'arrow-down' : 'arrow-up'" />
        </div>
      </div>
    </van-form>
    <!-- 用户选择组件 -->
    <selectUser ref="selectUser" @init="init" @select-user="handleUserSelect" />
    <!-- 日期选择器 -->
    <van-calendar v-model="datePickerVisible" type="range" @confirm="handleDateConfirm" />

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="selectData"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import selectUser from '@/views/component/selectUser.vue';

export default {
  name: 'HelloWorld',
  props: {
    keywordData: {
      type: Array,
      default: () => []
    },
    selectData: {
      type: Array,
      default: () => []
    }
  },
  components: {
    selectUser
  },
  data() {
    return {
      expand: false,
      datePickerVisible: false,
      currentDateFieldKey: '',
      currentSelectFieldKey: '',
      form: {},
      showPicker: false,
      // value: '',
    };
  },
  mounted() {
    // 初始化表单数据
    this.initForm();
  },
  methods: {
    // 初始化表单数据
    initForm() {
      this.keywordData.forEach(item => {
        if (item.key) {
          this.form[item.key] = '';
        }
      });
    },
    // 显示日期选择器
    showDatePicker(key) {
      this.currentDateFieldKey = key;
      this.datePickerVisible = true;
    },
    // 处理日期选择确认事件
    handleDateConfirm(value) {
      console.log(value);
      this.form[this.currentDateFieldKey] = `${value[0].getFullYear()}/${value[0].getMonth() + 1}/${value[0].getDate()}`+' - '+`${value[1].getFullYear()}/${value[1].getMonth() + 1}/${value[1].getDate()}`;
      this.datePickerVisible = false;
    },
    // 处理用户选择事件
    handleUserSelect(user) {
      const userItem = this.keywordData.find(item => item.type === 'user');
      if (userItem) {
        this.form[userItem.key] = user;
      }
    },
    // 重置表单
    resetForm() {
      this.form = {};
      this.initForm();
    },
    // 搜索功能
    search() {
      console.log('搜索数据：', this.form);
      this.$emit('search', this.form);
    },

    // 初始化 selectUser 组件事件
    init() {
      console.log('selectUser 组件初始化');
    },
    onConfirm(val) {
      this.form[this.currentSelectFieldKey] = {
        value: val.value,
        text: val.text
      };
      // this.form[this.currentSelectFieldKey] = val.value;
      console.log('数据',this.currentSelectFieldKey);
      console.log('数据',val);
      console.log('数据',this.form);

      // this.value = value;
      this.showPicker = false;
    },
    showSelector(key){
      this.currentSelectFieldKey = key;
      this.showPicker = true;
    }
  }
};
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.form-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.field-item {
  border: 1px solid rgb(153, 153, 153);
  border-radius: 100px;
}

.typesetting {
  width: 48%;
  padding: 1%;
}

.button-wrapper {
  display: flex;
  justify-content: space-around;
  /* justify-content: flex-end; */
  align-items: center;
}

.expand {
  margin-right: 2%;
  display: flex;
  align-items: center;
  color: rgb(24, 144, 255);
}
</style>